<template>
  <div :class="`right_side_drawer ${isOpen ? 'open' : 'close'}`">
    <div class="icon_switch" id="switch" @click="changeIsOpen">
      <span class="title">填报说明</span>
    </div>
    <div class="menu_detail">
      <h3>说明：</h3>
      <ol>
        <li>
          本表由依法属于审计机关审计监督对象的单位填写。填写时应当注意有关信息例如统一社会信用代码、单位详细名称等内容应当与“单位内部审计业务情况表”（内审统01表）保持一致。
        </li>
        <li>各单位应当根据审计机关要求的时间和方式上报本表。</li>
        <li>
          审核关系：
          <ul>
            <li>
              审计项目（020100）=贯彻落实国家重大政策措施审计（020101）+财务收支审计（020102）+固定资产投资审计（020103）+内部控制和风险管理审计（020104）+经济责任审计（020105）+信息系统审计（020106）+境外审计（020107）+其他（020108）；
            </li>
            <li>　 审计发现问题金额（020300）=绩效性问题金额（020310）+合规类问题金额（020320）；</li>
            <li>
              合规性问题金额（020320）=会计核算方面（020321）+违规使用资金（020322）+截留沉淀资金（020323）+损失浪费（020324）+挪用资金（020325）+偷漏税费（020326）+违规取得收入（020327）+其他（020328）；
            </li>
            <li>审计发现问题个数（020400）=金额类问题个数（020410）+非金额类问题个数（020420）；</li>
            <li>
              非金额类问题个数（020420）=国家政策措施落实方面（020421）+发展规划与战略决策方面（020422）+内部控制与风险管理方面（020423）+其他（020424）；
            </li>
            <li>
              审计发现问题整改（金额类）（020500）=调整会计账目（020501）+收回资金（020502）+挽回损失（020503）+归还原资金渠道（020504）+补缴税费（020505）+其他（020506）；
            </li>
            <li>
              审计发现问题整改（非金额类）（020600）=新制定制度（020601）+修订完善制度（020602）+优化完善业务流程（020603）+其他（020604）；
            </li>
            <li>
              根据审计建议给予党纪、政务和内部纪律处分（020700）=党纪处分（020701）+政务处分（020702）+内部纪律处分（020703）。
            </li>
          </ul>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
    }
  },
  methods: {
    changeIsOpen() {
      this.isOpen = !this.isOpen
    },
  },
}
</script>

<style lang="less" scoped>
.right_side_drawer {
  height: 62%;
  width: 541px;
  position: fixed;
  right: 0;
  top: 30%;
  padding: 10px 0px 10px 10px;
  display: flex;
  z-index: 100;
  transform: translateX(476px);
  pointer-events: none;
}
.right_side_drawer>div{
   pointer-events:auto;
}
.icon_switch {
  width: 55px;
  height: 125px;
  writing-mode: vertical-lr;
  text-align: center;
  background-color: rgb(57, 86, 166);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  pointer-events:auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  .title {
    &::before {
      content: '*';
      color: red;
      display: inline-block;
      margin-bottom: 5px;
    }
  }
}

.menu_detail {
  width: calc(100% - 60px);
  height: 100%;
  background-color: rgb(243, 246, 255);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 30px 15px;
  box-sizing: border-box;
  h3 {
    color: red;
  }
  ol {
    height: 92%;
    color: red;
    li {
      margin-top: 10px;
    }
    overflow-y: scroll;
  }
}

.open {
  transform: translateX(10px);
  transition: transform 0.3s linear;
}

.close {
  transform: translateX(476px);
  transition: transform 0.3s linear;
}
</style>